// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: busnavi
    width: 480
    height: 854

    signal closeAndClear()

    property int text_pixel_size: 33

    property variant bus_in_array: []
    property variant bus_out_array: []
    property variant bus_inxy_array: []
    property variant bus_outxy_array: []
    property variant bus_linename_array: []

    property variant bus_name_array: []
    property variant bus_xy_array: []
    property int current_waypoint: 0
//    property int current_out: 0
//    property bool is_next_in: false

    function set_model(bus_in, bus_inxy, bus_linename, bus_out, bus_outxy)
    {
        var busin = new Array();
        busin = bus_in;
        bus_in_array = busin;

        var businxy = new Array();
        businxy = bus_inxy;
        bus_inxy_array = businxy;

        var busout = new Array();
        busout = bus_out;
        bus_out_array = busout;

        var busoutxy = new Array();
        busoutxy = bus_outxy;
        bus_outxy_array = busoutxy;

        var buslinename = new Array();
        buslinename = bus_linename;
        bus_linename_array = buslinename;

        navi_model.clear();
        for (var i=0; i < busin.length; i++)
        {
            navi_model.append(
                        {
                            "bus_in_name": busin[i],
                            "bus_in_xy": businxy[i],
                            "bus_out_name": busout[i],
                            "bus_out_xy": busoutxy[i],
                            "bus_linename": buslinename[i]
                        }
                        )
        }

        var all_bus_name = new Array();
        for (var j=0; j < busin.length; j++)
        {
            all_bus_name.push(busin[j] + " 乘坐 " + buslinename[j]);
//            all_bus_name.push();
            all_bus_name.push("到达 " + busout[j]);
        }
        bus_name_array = all_bus_name;

        var all_bus_xy = new Array();
        for (var k=0; k < busin.length; k++)
        {
            all_bus_xy.push(businxy[k]);
//            all_bus_name.push();
            all_bus_xy.push(busoutxy[k]);
        }
        bus_xy_array = all_bus_xy;
    }

    Rectangle {
        id: bg
        height: parent.height
        color: "#000000"
        width: parent.width
        opacity: 0.500

        Behavior on height {
            PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
        }

        MouseArea
        {
            anchors.fill: parent
            onClicked: {}
        }
    }

    Item {
        id: item_main_panel
        x: 0
        y: 0
        width: 480
        height: 684
        clip: true

        Behavior on height {
            PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
        }

        Behavior on opacity {
            PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
        }

        ListView {
            id: list_view_navi
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: seperate_line.bottom
            anchors.topMargin: 10
            clip: true
            delegate: navi_delegate
            header: navi_header
            footer: navi_footer
            model: navi_model
        }

        Rectangle {
            id: seperate_line
            width: 480
            height: 2
            color: "#ffffff"
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: title.bottom
            anchors.topMargin: 10
        }

        Text {
            id: title
            color: "#ffffff"
            text: "公交导航"
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 20
            font.bold: true
            font.pixelSize: 55
        }

        Component
        {
            id: navi_delegate

            Item
            {
                id: navi_item
                width: list_view_navi.width
                height: col.height
                Column
                {
                    id: col
                    width: parent.width
                    height: item_from.height + item_linename.height + item_to.height + 10
                    spacing: 5
                    Item
                    {
                        id: item_from
                        width: parent.width
                        height: from.paintedHeight
                        Text {
                            id: text_from
                            x: 0
                            y: 0
                            text: "从："
                            font.pixelSize: text_pixel_size
                            color: "#ffffff"
                        }

                        Text {
                            id: from
                            x: 50
                            y: 0
                            width: parent.width - 60
                            text: bus_in_name
                            font.pixelSize: text_pixel_size
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "#ffffff"
                        }
                    }

                    Item
                    {
                        id: item_linename
                        width: parent.width
                        height: linename.paintedHeight
                        Text {
                            id: text_linename
                            x: 0
                            y: 0
                            text: "乘："
                            font.pixelSize: text_pixel_size
                            color: "#ffffff"
                        }

                        Text {
                            id: linename
                            x: 50
                            y: 0
                            width: parent.width - 60
                            text: bus_linename
                            font.pixelSize: text_pixel_size
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "#ffffff"
                        }
                    }

                    Item
                    {
                        id: item_to
                        width: parent.width
                        height: to.paintedHeight
                        Text {
                            id: text_to
                            x: 0
                            y: 0
                            text: "到："
                            font.pixelSize: text_pixel_size
                            color: "#ffffff"
                        }

                        Text {
                            id: to
                            x: 50
                            y: 0
                            width: parent.width - 60
                            text: bus_out_name
                            font.pixelSize: text_pixel_size
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "#ffffff"
                        }
                    }
                }
            }
        }

        Component
        {
            id: navi_header
            Item
            {
                height: 50
            }
        }

        Component
        {
            id: navi_footer
            Item
            {
                height: 50
            }
        }

        ListModel
        {
            id: navi_model
        }

        Mbutton {
            id: mbutton_close
            x: 312
            y: 15
            anchors.right: parent.right
            anchors.rightMargin: 15
            anchors.verticalCenter: title.verticalCenter
            text_size: 26
            textstring: "关闭导航"
            pro_width: 150
            pro_height: 60

            onButtonclick:
            {
                closeAndClear();
            }
        }

    }

    Item {
        id: item_contral_panel
        y: 684
        width: 480
        height: 76
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        Rectangle {
            id: rectangle4
            color: "#000000"
            opacity: 0.500
            anchors.fill: parent
        }

        Item {
            id: item_panel_updown
            y: 3
            width: 70
            height: 70
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter

            Behavior on rotation {
                PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
            }

            Rectangle {
                id: rectangle3
                x: 18
                y: 11
                width: 60
                height: 60
                color: "#00000000"
                radius: 30
                border.width: 2
                smooth: true
                border.color: "#ffffff"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter

                Rectangle {
                    id: rectangle5
                    x: 10
                    y: 39
                    width: 40
                    height: 5
                    color: "#ffffff"
                    radius: 30
                    smooth: true
                }

                Rectangle {
                    id: rectangle6
                    x: 20
                    y: 22
                    width: 37
                    height: 5
                    color: "#ffffff"
                    radius: 30
                    rotation: 60
                    smooth: true
                }

                Rectangle {
                    id: rectangle7
                    x: 3
                    y: 22
                    width: 37
                    height: 5
                    color: "#ffffff"
                    radius: 30
                    rotation: -60
                    smooth: true
                }
            }

            MouseArea
            {
                anchors.fill: parent

                onClicked:
                {
                    busnavi.state == "hidden" ? busnavi.state = "" : busnavi.state = "hidden";
                }
            }
        }

        Row {
            id: row2
            x: 121
            y: 0
            width: 330
            height: parent.height
            spacing: 15
            anchors.right: parent.right
            anchors.rightMargin: 0

            Item {
                id: item_first_waypoint
                x: 260
                y: 3
                width: 70
                height: 70
                anchors.verticalCenter: parent.verticalCenter
                Rectangle {
                    id: rectangle23
                    x: 18
                    y: 11
                    width: 60
                    height: 60
                    color: "#00000000"
                    radius: 30
                    smooth: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    border.color: "#ffffff"
                    Rectangle {
                        id: rectangle20
                        x: 14
                        y: 36
                        width: 34
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        rotation: 30
                        smooth: true
                    }

                    Rectangle {
                        id: rectangle21
                        x: 14
                        y: 20
                        width: 34
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        smooth: true
                        rotation: -30
                    }

                    Rectangle {
                        id: rectangle22
                        x: -1
                        y: 28
                        width: 37
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        smooth: true
                        rotation: 90
                    }
                    border.width: 2
                    anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea
                {
                    id: ma_first_waypoint
                    anchors.fill: parent

                    onClicked:
                    {
                        data_container.setting_gps_follow_me = false;
                        current_waypoint = 0;
                        web_view_map.panto(bus_xy_array[current_waypoint]);
                        set_notification_loader(10000, bus_name_array[current_waypoint]);
//                        is_next_in = false;
                    }
                }

                states: State {
                    name: "pressed"
                    when: ma_first_waypoint.pressed

                    PropertyChanges {
                        target: item_first_waypoint
                        opacity: 0.6
                    }

                    PropertyChanges {
                        target: item_first_waypoint
                        scale: 0.6
                    }
                }
            }

            Item {
                id: item_previous_waypoint
                x: 183
                y: 3
                width: 70
                height: 70
                anchors.verticalCenter: parent.verticalCenter
                Rectangle {
                    id: rectangle19
                    x: 18
                    y: 11
                    width: 60
                    height: 60
                    color: "#00000000"
                    radius: 30
                    smooth: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    border.color: "#ffffff"

                    Rectangle {
                        id: rectangle17
                        x: 10
                        y: 35
                        width: 37
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        smooth: true
                        rotation: 30
                    }

                    Rectangle {
                        id: rectangle18
                        x: 10
                        y: 19
                        width: 37
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        smooth: true
                        rotation: -30
                    }
                    border.width: 2
                    anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea
                {
                    id: ma_previous_waypoint
                    anchors.fill: parent

                    onClicked:
                    {
                        data_container.setting_gps_follow_me = false;
                        if (current_waypoint == 0)
                        {
                            ;
                        }
                        else
                        {
                            current_waypoint-- ;
                            web_view_map.panto(bus_xy_array[current_waypoint]);
                            set_notification_loader(10000, bus_name_array[current_waypoint]);

                        }
//                        if (is_next_in)
//                        {
//                            current_in-- ;
//                            web_view_map.panto(bus_inxy_array[current_in]);
//                            set_notification_loader(10000, bus_in_array[current_in] + " 乘坐 " + bus_linename_array[current_in]);
//                            is_next_in = false;
//                        }
//                        else
//                        {
//                            if (current_in == 0)
//                            {
//                                ;
//                            }
//                            else
//                            {
//                                current_out--;
//                                web_view_map.panto(bus_outxy_array[current_out]);
//                                set_notification_loader(10000, "到达 " + bus_out_array[current_out]);
//                                is_next_in = true;
//                            }
//                        }
                    }
                }

                states: State {
                    name: "pressed"
                    when: ma_previous_waypoint.pressed

                    PropertyChanges {
                        target: item_previous_waypoint
                        opacity: 0.6
                    }

                    PropertyChanges {
                        target: item_previous_waypoint
                        scale: 0.6
                    }
                }
            }

            Item {
                id: item_next_waypoint
                x: 104
                y: 3
                width: 70
                height: 70
                anchors.verticalCenter: parent.verticalCenter
                Rectangle {
                    id: rectangle15
                    x: 18
                    y: 11
                    width: 60
                    height: 60
                    color: "#00000000"
                    radius: 30
                    smooth: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    border.color: "#ffffff"

                    Rectangle {
                        id: rectangle13
                        x: 14
                        y: 37
                        width: 37
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        smooth: true
                        rotation: -30
                    }

                    Rectangle {
                        id: rectangle14
                        x: 14
                        y: 20
                        width: 37
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        smooth: true
                        rotation: 30
                    }
                    border.width: 2
                    anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea
                {
                    id: ma_next_waypoint
                    anchors.fill: parent

                    onClicked:
                    {
                        data_container.setting_gps_follow_me = false;
                        if (current_waypoint == bus_xy_array.length - 1)
                        {
                            ;
                        }
                        else
                        {
                            current_waypoint++ ;
                            web_view_map.panto(bus_xy_array[current_waypoint]);
                            set_notification_loader(10000, bus_name_array[current_waypoint]);

                        }
//                        if (is_next_in)
//                        {
//                            if (current_out == bus_outxy_array.length - 1)
//                            {
//                                ;
//                            }
//                            else
//                            {
//                                current_in++ ;
//                                web_view_map.panto(bus_inxy_array[current_in]);
//                                set_notification_loader(10000, bus_in_array[current_in] + " 乘坐 " + bus_linename_array[current_in]);
//                                is_next_in = false;
//                            }
//                        }
//                        else
//                        {

//                            current_out++;
//                            web_view_map.panto(bus_outxy_array[current_out]);
//                            set_notification_loader(10000, "到达 " + bus_out_array[current_out]);
//                            is_next_in = true;

//                        }
                    }
                }

                states: State {
                    name: "pressed"
                    when: ma_next_waypoint.pressed

                    PropertyChanges {
                        target: item_next_waypoint
                        opacity: 0.6
                    }

                    PropertyChanges {
                        target: item_next_waypoint
                        scale: 0.6
                    }
                }
            }

            Item {
                id: item_last_waypoint
                x: 28
                y: 3
                width: 70
                height: 70
                anchors.verticalCenter: parent.verticalCenter
                Rectangle {
                    id: rectangle11
                    x: 18
                    y: 11
                    width: 60
                    height: 60
                    color: "#00000000"
                    radius: 30
                    smooth: true
                    anchors.horizontalCenter: parent.horizontalCenter
                    border.color: "#ffffff"
                    Rectangle {
                        id: rectangle8
                        x: 28
                        y: 28
                        width: 40
                        height: 5
                        color: "#ffffff"
                        radius: 30
                        rotation: 90
                        smooth: true
                    }

                    Rectangle {
                        id: rectangle9
                    x: 11
                    y: 20
                    width: 37
                    height: 5
                    color: "#ffffff"
                    radius: 30
                    smooth: true
                    rotation: 30
                }

                Rectangle {
                    id: rectangle10
                    x: 11
                    y: 37
                    width: 37
                    height: 5
                    color: "#ffffff"
                    radius: 30
                    smooth: true
                    rotation: -30
                }
                border.width: 2
                anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea
                {
                    id: ma_last_waypoint
                    anchors.fill: parent

                    onClicked:
                    {
                        data_container.setting_gps_follow_me = false;
                        current_waypoint = bus_xy_array.length - 1;
                        web_view_map.panto(bus_xy_array[current_waypoint]);
                        set_notification_loader(10000, bus_name_array[current_waypoint]);
                    }
                }

                states: State {
                    name: "pressed"
                    when: ma_last_waypoint.pressed

                    PropertyChanges {
                        target: item_last_waypoint
                        opacity: 0.6
                    }

                    PropertyChanges {
                        target: item_last_waypoint
                        scale: 0.6
                    }
                }
            }



        }

    }


    states: [
        State {
            name: "hidden"

            PropertyChanges {
                target: item_main_panel
                height: 0
                opacity: 0
            }

            PropertyChanges {
                target: item_panel_updown
                rotation: 180
            }

            PropertyChanges {
                target: bg
                height: 0
            }
        }
    ]

}
